<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>开启头部工具栏 - 数据表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">申请列表</div>
                <div class="layui-card-body">
                    <!--这是搜索-->
                    <div class="layui-form" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">批次</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="querySn" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="queryName" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" id="queryBtn">查询</button>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" id="insertBtn">添加</button>
                            </div>
                        </div>
                        <!--这就是表格-->
                        <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>

                        <script type="text/html" id="test-table-toolbar-toolbarDemo">
                            <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                            </div>
                        </script>

                        <!--角色名字显示-->
                        <!--模板可以用一个变量d表示正在被遍历的对象-->
                        <script type="text/html" id="roleName">
                            {{d.roleId == 2?'学校用户':(d.roleId==3?'学院用户':(d.roleId==4?'辅导员':'学生'))}}
                        </script>
                        <script type="text/html" id="enabled">
                            {{#  if(d.enabled == 1){ }}
                            <div class="layui-input-block">
                                <input type="checkbox" name="close" lay-skin="switch" lay-text="启用|禁用" checked disabled>
                            </div>
                            {{#  } else { }}
                            <div class="layui-input-block">
                                <input type="checkbox" name="close" lay-skin="switch" lay-text="启用|禁用" disabled>
                            </div>
                            {{#  } }}
                        </script>
                        <script type="text/html" id="timeFormat">
                            {{d.gmtCreated.replace('T', ' ')}}
                        </script>
                        <!--操作按钮模板-->
                        <script type="text/html" id="test-table-toolbar-barDemo">
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../../layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form'], function(){
            var admin = layui.admin,
                $ = layui.$,
                form = layui.form
                ,table = layui.table;

            table.render({
                elem: '#test-table-toolbar'
                ,url: '/application/sqList',
                parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.records //解析数据列表
                    };
                },
                request: {
                    pageName: 'pageNo' //页码的参数名称，默认：page
                    ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                ,toolbar: '#test-table-toolbar-toolbarDemo'
                ,title: '用户数据表'
                ,cols: [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        ,{field:'batchId', title:'寒衣批次号'}
                        ,{field:'sn', title:'学号'}
                        ,{field:'name', title:'姓名'}
                        ,{field:'gender', title:'性别'}
                        ,{field:'difficultyLevel', title:'困难等级'}
                        ,{field:'applicationReason', title:'申请理由'}
                        ,{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo', width:150}
                    ]
                ]
                ,page: true
            });


            // 查询
            $("#queryBtn").click(function () {
                table.reload('test-table-toolbar', {
                    url: '/application/sqList'
                    ,where: {
                        sn: $("#querySn").val(),
                        name: $("#queryName").val(),
                        batchId: $("#queryBatchId").val()
                    } //设定异步数据接口的额外参数
                });

            })

            //添加
            $("#insertBtn").click(function () {
                layer.open({
                    type: 1,
                    area: '500px',
                    title: '添加用户...',
                    content: $("#insertUserDialog")
                })
            })

            $("#isubBtn").click(function () {
                $.ajax({
                    type: 'post',
                    url: 'application/insert',
                    data:{
                        id: $("#insertId").val(),
                        name: $("#insertName").val(),
                        sn: $("#insertSn").val(),
                        password: $("#insertPwd").val(),
                        roleId: $("#insertRoleId").val(),
                        enabled: $("#insertEnabled").val()
                    },
                    success: function(res){
                        if (res.data==true){
                            layer.msg('添加成功', {
                                icon: 1,
                                time: 1500
                            }, function () {
                                // 重新刷新表格
                                table.reload('test-table-toolbar', {
                                    url: '/application/sqList'
                                    ,where: {} //设定异步数据接口的额外参数
                                });
                                // 关闭弹框
                                layer.closeAll()
                            });
                        }
                    }
                })
            })

            //头工具栏事件
            table.on('toolbar(test-table-toolbar)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test-table-toolbar)', function(obj){
                var data = obj.data;// 点的按钮对应的行的数据
                var event = obj.event;// 触发的哪个按钮
                switch (event) {
                    case 'edit':
                        // 做编辑的事
                        editEvent(data);
                        break;
                    case "del":
                        // 删除的事
                        deleteEvent(data)
                        break
                }
            });
            // 点击删除
            function deleteEvent(data) {
                layer.confirm('确认删除选中数据吗?', {icon: 3, title:'提示'}, function(index){
                    $.ajax({
                        type: 'get',
                        url: '/application/removeById?id='+data.id,
                        success: function (res) {
                            if(res.data == true){
                                layer.msg('删除成功', {
                                    icon: 1,
                                    time: 1500
                                }, function () {
                                    // 重新刷新表格
                                    table.reload('test-table-toolbar', {
                                        url: '/application/sqList'
                                        ,where: {} //设定异步数据接口的额外参数
                                    });
                                });
                            }
                        }
                    })
                },function () {

                });
            }
            // 点击编辑
            function editEvent(data) {
                // 给弹框内容赋值
                $("#editId").val(data.id)
                $("#editSn").val(data.sn)
                $("#editPwd").val(data.password)
                $("#editName").val(data.name)
                $("#editRoleId").val(data.roleId)
                $("#editEnabled").val(data.enabled)
                form.render('select');
                // 打开弹框
                layer.open({
                    type: 1,
                    area: '500px',
                    title: '编辑用户',
                    content: $("#editUserDialog")
                })
            }

            // 点击提交
            $('#subBtn').click(function () {
                $.ajax({
                    type: 'post',
                    url: '/application/update',
                    data: {
                        id:  $("#editId").val(),
                        sn: $("#editSn").val(),
                        password: $("#editPwd").val(),
                        name: $("#editName").val(),
                        roleId: $("#editRoleId").val(),
                        enabled:  $("#editEnabled").val()
                    },
                    success: function (res) {
                        if(res.data == true){
                            layer.msg('编辑成功', {
                                icon: 1,
                                time: 1500
                            }, function () {
                                // 重新刷新表格
                                table.reload('test-table-toolbar', {
                                    url: '/application/sqList'
                                    ,where: {} //设定异步数据接口的额外参数
                                });
                                // 关闭弹框
                                layer.closeAll()
                            });
                        }
                    }
                })
            })

            // 点击取消
            $("#cancelBtn").click(function () {
                layer.closeAll()
            })
            $("#icancelBtn").click(function () {
                layer.closeAll()
            })
        });
    </script>
</body>
</html>